<template>
  <div class="dashboard-student">
    <div class="app-student">
      <el-card >
        <!-- ========= 头部搜索表单=========== -->
        <el-row type="flex" justify="space-between" >
          <el-form label-width="200px" :inline="true">
            <el-form-item >
              <el-input v-model="queryData.student_name" placeholder="学员姓名" size="small"></el-input>
            </el-form-item>
            <el-form-item >
               <el-select @focus="getSubjectList" v-model="queryData.subject_id" placeholder="归属学科" size="small">
                <el-option
                  v-for="item in subject"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item >
               <el-select @focus="getStateClassList" v-model="queryData.class_id" placeholder="归属班级" size="small">
                <el-option
                  v-for="item in StateClass"
                  :key="item.id"
                  :label="item.class_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item >
               <el-select v-model="queryData.student_state" placeholder="账号状态" size="small">
                <el-option
                  v-for="item in stateList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item >
                <el-button size="small" type="primary" plain @click="initData">搜索</el-button>
                <el-button size="small" @click="chongzhi">重置</el-button>
            </el-form-item>
            <!-- <el-form-item style="float:right">
                <el-button type="primary" size="small">批量导入</el-button>
               <el-button size="small">增加学员</el-button>
            </el-form-item> -->
          </el-form>
          <el-row style="padding-top:5px">
            <el-button size="small" type="warning" plain @click="uploadShow=true">批量导入</el-button>
            <el-button size="small" type="primary" plain @click="showDialog = true">增加学员</el-button>
          </el-row>
        </el-row>
        <!-- ========= 头部搜索表单=========== -->

        <!-- ========= 批量操作按钮========== -->
          <el-row v-if="showButton" style="padding-bottom:25px">
                <el-button type="success" size="small" @click="Enable">批量启用</el-button>
                <el-button type="warning" size="small" @click="Disable">批量禁用</el-button>
                <el-button type="danger" size="small" @click="Delete">批量删除</el-button>
          </el-row>
        <!-- ========= 批量操作按钮=========== -->

        <!-- ========= 表格区域=========== -->
         <el-table
         @selection-change="ButtonChange"
          :highlight-current-row="true"
          current-change=""
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            type="selection"
            align="center">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="55px"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="student_name"
            label="学生姓名"
           >
          </el-table-column>
          <el-table-column
            prop="student_phone"
            label="手机号"
           >
          </el-table-column>
          <el-table-column
            prop="class_name"
            label="班级名称"
            >
          </el-table-column>
          <el-table-column
            prop="subject_name"
            label="学科名称"
            >
          </el-table-column>
          <el-table-column
            prop="student_sex"
            label="性别"
            >
            <template slot-scope="scope">
              <span v-if="scope.row.student_sex===1">男</span>
              <span v-if="scope.row.student_sex===2">女</span>
              <span></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="student_state"
            label="状态"
            >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.student_state===2" type="success">正常</el-tag>
                  <el-tag v-if="scope.row.student_state===1" type="warning">待审核</el-tag>
                  <el-tag v-if="scope.row.student_state===3" type="info">禁用</el-tag>
                </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            align="center">
            <template slot-scope="scope">
              <!-- 修改按钮 -->
              <el-button @click="editHandle(scope.row.id)" size="small" type="primary" icon="el-icon-edit" circle></el-button>
             <!-- 删除按钮 -->
              <el-button @click="delHandle(scope.row.id)" size="small" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- ========= 表格区域=========== -->

        <!-- ========= 分页=========== -->
           <el-row type="flex" justify="end">
              <el-pagination
              
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryData.page"
              :page-sizes="[3, 5, 7, 10]"
              :page-size="queryData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
           </el-row>
        <!-- ========= 分页=========== -->

      </el-card>
        <!-- ========= 新增/修改弹框=========== -->
          <el-dialog
            :title="this.formData.id? '修改学员信息':'添加学员信息'"
            :visible.sync="showDialog"
            width="45%"
            @close="handleClose">
            <el-form :model="formData" :rules="formRules" ref="form" :inline="true" label-width="80px">
              <el-row type="flex" justify="space-between">
                <el-form-item label="归属学科" prop="subject_id">
                    <el-select @focus="getSubjectList" v-model="formData.subject_id" placeholder="请选择" style="width:182px">
                    <el-option
                      v-for="item in subject"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="归属班级" prop="class_id">
                    <el-select @focus="getStateClassList" v-model="formData.class_id" placeholder="请确保已选择学科" style="width:182px">
                      <el-option
                        v-for="item in StateClass"
                        :key="item.id"
                        :label="item.class_name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-row>
              <el-row type="flex" justify="space-between">
                <el-form-item label="学生姓名" prop="student_name">
                  <el-input v-model="formData.student_name" placeholder="请输入学生姓名" width="200px"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="student_phone">
                  <el-input v-model="formData.student_phone" placeholder="请输入手机号" ></el-input>
                </el-form-item>
              </el-row>
              <el-row >
                <el-form-item label="密码">
                  <el-input v-model="formData.student_password" placeholder="默认密码是 姓名+admin888"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="formData.student_sex" :label=1>男</el-radio>
                    <el-radio v-model="formData.student_sex" :label=2>女</el-radio>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="状态">
                    <el-radio v-model="formData.student_state" :label=1>待审核</el-radio>
                    <el-radio v-model="formData.student_state" :label=2>正常</el-radio>
                    <el-radio v-model="formData.student_state" :label=3>禁用</el-radio>
                </el-form-item>
              </el-row>
           
            </el-form>
            <el-row slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="btnOk">确 定</el-button>
            </el-row>
          </el-dialog>
        <!-- ========= 新增/修改弹框=========== -->


        <!-- ========= 导入弹框=========== -->
        
           <UploadExcel ref="Excel" :fileInfo="fileInfo" :uploadShow="uploadShow" @uploadData="uploadData" @close="close" />
        <!-- ========= 导入弹框=========== -->


    </div>
  </div>
</template>

<script>
import {
  GetStudentList,
  PostStudentApi,
  queryClassApi,
  StateClassListApi,
  ChangeStatus,
  ErrnoeStudentApi,
  DeleteStudentApi,
  editStudentApi,
  UploadExcelApi} from "@/api/class/student.js"
export default {
  name:'Student',
  data() {
    return {
        queryData:{
        student_name:'',//学生姓名
        class_id:'',//班级id
        subject_id:'',//学科id
        student_state:'',//学生状态0禁用,1待审核,2正常
        page:1,//当前页数
        limit:10,//每页展示的数量
        student_phone:'',//学生电话
        student_sex:'',//学生性别
        class_name:'',//班级名字
        subject_name:'',//学科名字
        username:'',//创建人
        creator_id:'',//创建者id
        created_at:'',//创建日期
      },
           stateList: [{
          value: 1,
          label: '待审核'
        }, {
          value: 2,
          label: '正常'
        }, {
          value: 3,
          label: '禁用'
        },],
      total:10,
      tableData:[],
        value:'',
        showDialog:false,
        formData:{
            class_id:'',//班级id
            student_name:'',//学生姓名
            student_password:'',//学生密码
            student_phone:'',//学生手机
            student_sex:1,//学生性别
            student_state:1,//学生状态
            subject_id:'',//学科id
            // created_at:'',
            // creator_id:'',
            class_name:'',
            subject_name:'',
            id:null,
        },
        formRules:{
          subject_id: [
            { required: true, message: '请选择归属学科', trigger: 'blur' },
          ],
          class_id: [
            { required: true, message: '请选择归属班级', trigger: 'blur' },
          ],
          student_name: [
            { required: true, message: '请输入学员名称', trigger: 'blur' },
          ],
          student_phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
          ],
        },
        subject:[],//下拉获取归属学科信息
        StateClass:[], // 下拉获取归属班级信息
        showButton:false,//批量操作按钮
        checkboxid:[],//列表勾选id
        uploadShow:false,//批量导入显示
        fileInfo:{
          name:"",
          url:''
        },//导入表格数据
         listobj:{
                list:[],
            },
    }
  },
  // computed:{
  //       uploadShow(){
          
  //       },//批量导入显示
  // },
  created(){
    this.initData()
  },
  methods:{
  async initData(){
      let {list,total} = await GetStudentList(this.queryData)
      // console.log(list , total);
      this.total=total
      this.tableData = list
    },
    //新增/修改  提交逻辑
    async btnOk(){
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error);
      }
      if(this.formData.id){
          //修改逻辑
          await editStudentApi(this.formData)
          
          this.$message.success('修改成功')
      }else{
          //新增逻辑
          await PostStudentApi(this.formData)
     
          this.$message.success('添加成功')

      }
      this.showDialog=false
      this.initData()
    },
    handleSizeChange(val){
      this.queryData.limit=val
      this.initData()
    },
    handleCurrentChange(val){
      this.queryData.page=val
      this.initData()
    },
    //修改按钮逻辑获取单个信息
    async editHandle(id){
      let res = await ErrnoeStudentApi(id)
      console.log(res);
      this.formData = res
      this.showDialog=true

    },
    //删除按钮逻辑
    async delHandle(id){
      await this.$confirm('确定删除吗?')
      await DeleteStudentApi([id])
      this.$message.success('删除成功')
      this.initData()
    },
    //搜索框重置
    chongzhi(){
      this.queryData.student_name=''
      this.queryData.subject_id=''
      this.queryData.class_id=''
      this.queryData.student_state=''
      this.initData()
    },
    //关闭弹框置空
    handleClose(){
      this.formData={
             class_id:'',//班级id
            student_name:'',//学生姓名
            student_password:'',//学生密码
            student_phone:'',//学生手机
            student_sex:1,//学生性别
            student_state:1,//学生状态
            subject_id:'',//学科id
      }
    },
    //下拉获取归属学科信息
    async getSubjectList(){
      let res = await queryClassApi()
      // console.log(res);
      this.subject= res
      console.log(this.subject);
    },
    // 下拉获取归属班级信息
    async getStateClassList(){
      let {list} = await StateClassListApi()
      // console.log(list);
      this.StateClass= list
      console.log(this.StateClass);

    },
    // 批量操作按钮
    ButtonChange(val){
      console.log(val);
     if(val.length === 0){
      this.showButton = false
     }else{
      this.showButton= true
     }
      this.checkboxid = val.map((item)=>item.id)
      console.log(this.checkboxid);
    },
    //批量启用
    async Enable(){
        try {
          await this.$confirm(`确定批量启用这${this.checkboxid.length}条数据吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await ChangeStatus({
          id:this.checkboxid,
          status:2
        })
        this.$message.success('启用成功')
        this.initData()
        } catch (error) {
          this.$message.info( '已取消')
        }
    },
    //批量禁用
    async Disable(){
         try {
          await this.$confirm(`确定批量禁用这${this.checkboxid.length}条数据吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await ChangeStatus({
          id:this.checkboxid,
          status:3
        })
        this.$message.success('禁用成功')
        this.initData()
        } catch (error) {
          this.$message.info( '已取消')
        }
    },
    //批量删除
     async Delete(){
          try {
          await this.$confirm(`确定删除${this.checkboxid.length}条数据吗? 此操作不可恢复?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        })
        await DeleteStudentApi(
          this.checkboxid
        )
        this.$message.success('删除成功')
        this.initData()
        } catch (error) {
          this.$message.info( '已取消')
        }
    },
    //导入表格 逻辑
    async uploadData(tableList){
      this.listobj.list=tableList
      await UploadExcelApi(this.listobj)
      console.log(this.listobj);
      this.$message.success('导入成功')
       this.$refs.Excel.active = 0
      this.$refs.Excel.fileName = null
      this.uploadShow = false
      this.initData()
    },
    //导入表格关闭事件
    close(){
      this.uploadShow = false
      this.$refs.Excel.active = 0
      this.$refs.Excel.fileName = null
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-student{
    .app-student{
      padding:20px;
      background-color: #eaedf1;
    }
  }
</style>